<template>
  <div class="layout-col bs flex1">
    <div class="ww100 flex-bc plr12 ptb8 bs2">
      <div class="flex-sc">
        <div class="h30">
          <img class="hh100" src="@/assets/images/tibi-ico.png" />
        </div>
        <span class="f15 fw ml8">{{route.path == '/home'?'重点配电房':''}}告警分类</span>
      </div>
    </div>
    <!-- <div v-show="!isNull(publicStore._public.alarmType)" class="flex1 layout-col" id="Pie3d"></div> -->
    <div v-show="!isNull(publicStore._public.alarmType)" class="flex1 layout-col flex-cc">
      <div class="h100x4 w100x4" id="Pie"></div>
    </div>
    <div v-if="isNull(publicStore._public.alarmType)" class="flex1 tc flex-cc">设置告警类型</div>
  </div>
</template>

<script lang="ts" setup>
  import ec from "@/utils/chart";
  const route = useRoute();
  const { drawChart } = ec();
  const { proxy }: any = getCurrentInstance();
  const publicStore = proxy.publicStore();
  const state = reactive({
    ...publicStore.$state,
  });
  const props = defineProps({
    state: {
      type: [Object, Array],
      default: ()=>{return {}}
    },
  })

  watch(() => publicStore._public.alarmType, async (val, old) => {
    if(proxy.isNull(val)) return
    if(JSON.stringify(val) == JSON.stringify(old)) return
    await nextTick();
    setChart();
  },{ immediate: false, deep: true });

  const setChart = async() => { 
    let params1 = {internalDiameterRatio: 0.8, distance: 200, alpha: 30, pieHeight: 20, opacity: 0.8}
    // drawChart('Pie3d','Pie3d', '', publicStore._public.alarmType, params1)
    drawChart('Pie','Pie', '', publicStore._public.alarmType, params1)
  }
</script>

<style scoped lang="scss">

</style>
